<template>
  <div class="con-box">
    <div class="box-tit">{{$t('ucAccount.accountInformation')}}</div>
    <div :class="['box-content','account',this.$store.state.locale == 'en'?'en':'']">
      <div class="item">
        <!-- <a href=""
        class="edit-img">-->
        <div class="tit"><span class="asterisk">*</span>{{$t('ucAccount.memberAvatar')}}：</div>

        <div class="user-img">
          <!-- <img :src="dataForm.avatarUrl" alt /> -->
          <pic-upload v-model="dataForm.avatarUrl" :fullUrl="true"></pic-upload>
        </div>
        <!-- <a href="javascript:void(0)" class="edit-img">编辑头像</a> -->
        <!--  -->
      </div>

      <div :class="['item', errorTips == 3 ? 'error' : '']">
        <div class="tit"><span class="asterisk">*</span>{{$t('ucAccount.memberNickname')}}：</div>
        <input
          type="text"
          class="text"
          v-model="dataForm.nickName"
          maxlength="15"
          :placeholder="$t('ucAccount.maximumCharacters')"
        />
        <div class="error-text" v-if="errorTips == 3">{{$t('ucAccount.memberCannotEmpty')}}</div>
      </div>
      <!-- <div class="item">
        <div class="tit">
          <span class="asterisk">*</span>联系电话：
        </div>
        <input type="text" class="text" value="13800138000" />
        <div class="error-text">联系电话不能为空</div>
      </div>-->
      <div class="item">
        <div class="tit">{{$t('ucAccount.verifiedMobile')}}：</div>
        <div class="phone-number">{{ mobile }}</div>
      </div>
      <!-- <div class="item">
        <div class="tit">所在地区：</div>
        <div class="area">请选择</div>
        <div class="area">请选择</div>
        <div class="area">请选择</div>
      </div>
      <div class="item">
        <div class="tit">详细地址：</div>
        <input type="text"
               class="text">
      </div>-->
      <div class="item">
        <div class="tit">&nbsp;</div>
        <a href="javascript:void(0)" class="btn" @click="updateUserInfo()"
          >{{$t('ucAccount.saveAccount')}}</a
        >
      </div>
    </div>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
import util from '../../plugins/util'
import PicUpload from '~/components/pic-upload'
export default {
  data () {
    return {
      dataForm: {
        avatarUrl: '',
        nickName: '',
        userMobile: '',
        auth: {},
      },
      mobile: '',
      imgs: '',
      auth: {},
      errorTips: 0,
      isUpload: false,
      value: '',
    }
  },
  components: {
    PicUpload
  },
  mounted () {
    // 设置网页标题
    document.title = this.$i18n.t('ucAccount.accountInformation')
    // this.auth = { Authorization: Cookie.get('token') }
    this.getUserInfo()
  },
  methods: {

    /**
    * 获取用户信息
    */
    getUserInfo () {
      this.$axios.get('/p/user/userInfo', {
      }).then(({ data }) => {
        this.dataForm.userMobile = data.userMobile
        this.dataForm.avatarUrl = data.pic
        this.mobile = data.mobile
        this.dataForm.nickName = data.nickName
        localStorage.setItem('nickName', data.nickName)
        localStorage.setItem('userAvatar', data.pic)
      })
    },
    /**
    * 修改用户头像
    */
    addImg () {
      this.dataForm.pic = this.imgs
    },
    /**
    * 修改用户信息
    */
    updateUserInfo () {

      if (!this.dataForm.nickName.trim()) {
        this.errorTips = 3
        return
      }
      this.$axios.put('/p/user/setUserInfo', this.dataForm
      ).then(({ data }) => {
        // if (data) {
        this.$message({
          message: this.$i18n.t('ucAccount.successfullyModified'),
          type: 'success',
          duration: 1000,
          onClose: () => {
            this.getUserInfo()
            setTimeout(() => {
              this.$router.push({ path: '/user-center?currentPage=index' })
            }, 1000)
          }
        })
        // }
      })
    }
  }
}
</script>

<style scoped src='~/assets/css/user-center.css'></style>
<style scoped src='~/assets/css/uc-edit.css'></style>
